import React, { Component } from 'react'
import { Modal } from 'antd'
import AreaSearch from './AreaSearch'
import Transfer from '@/components/Transfer'
import styles from './index.less'
import { connect } from 'dva';

@connect(({shopaccount})=>({
    airports: shopaccount.airports,
    targetItems: shopaccount.targetItems
}))
export default class SelectAirport extends Component {

    filterOption = (inputValue, option) => `${option.title}(${option.code})`.indexOf(inputValue) > -1
    showItem = (item)=>{ return `${item.title}(${item.code})` }

    handleChange =( targetItems, direction, moveItems )=> {
        console.log('targetItem',targetItems)
        targetItems.forEach(item => {
            item.key = item.key
        })
        const { dispatch } = this.props
        dispatch({
            type: 'shopaccount/saveTargetItems',
            payload: [...targetItems]
        })
    }
    render() {
        const {airports, targetItems, canVisible, handleOk, handleCancel} = this.props
        return (
            <Modal
                title="添加机场 (可服务多个机场)"
                visible={canVisible}
                onOk={handleOk}
                onCancel={handleCancel}
                width={748}
                className={styles.modalBox}
                bodyStyle={{display: 'flex'}}
            >
                <AreaSearch/>
                <Transfer
                    listStyle={{
                        width: 220,
                        height: 572,
                    }}
                    rowKey={record => record.key}
                    titles={['待选机场', '已选机场']}
                    dataSource={airports}
                    targetItems={targetItems}
                    showSearch
                    filterOption={this.filterOption}                 
                    onChange={this.handleChange}
                    render={this.showItem}
                />
            </Modal>
        )
    }
}
